<template>
    <div>
        <WebSocket/>
        <!-- v-if="isTrue === false" -->
        <div class="image-grid">
            <el-tooltip
            class="box-item"
            effect="dark"
            content="展开"
            placement="right"
            >
            <CIcon class="cil-menu" icon="cil-menu" size="lg" @click="sidebar.toggleVisible()" />
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="调度总览" placement="right">
                <div class="imageBox" @click="goToPage('diaoduzonglan')"><img src="/public/menuicon/tiaoduzonglan.png"
                        alt=""></div>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="远程监测" placement="right">
                <div class="imageBox" @click="goToPage('yuanchengjiance')"><img
                        src="/public/menuicon/yuanchengjiance20.png" alt=""></div>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="厂站工艺" placement="right">
                <div class="imageBox" @click="goToPage('changzhangongyi')"><img
                        src="/public/menuicon/yuanchengjiance20.png" alt=""></div>
            </el-tooltip>
            <div style="margin: 5px 0 0 16px;">
                <el-collapse>
                    <el-collapse-item>
                        <template #title>
                            <el-tooltip class="box-item" effect="dark" content="报警预警"
                                placement="right">
                                <div class="报警预警">
                                    <img src="/public/menuicon/99.png" alt="Custom Icon" class="custom-icon">
                                </div>
                            </el-tooltip>
                        </template>

                        <el-tooltip class="box-item" effect="dark" content="实时报警" placement="right">
                            <div class="imageBox1" @click="goToPage('shishibaojing')"><img
                                    src="/public/menuicon/shishibaojing.png" alt="">
                            </div>
                        </el-tooltip>
                        <el-tooltip class="box-item" effect="dark" content="历史报警" placement="right">
                            <div class="imageBox1" @click="goToPage('lishibaojing')"><img
                                    src="/public/menuicon/lishibaojing.png" alt=""></div>
                        </el-tooltip>
                        <el-tooltip class="box-item" effect="dark" content="报警记录" placement="right">
                            <div class="imageBox1" @click="goToPage('baojinghjilu')"><img
                                    src="/public/menuicon/warning-list3.png" alt=""></div>
                        </el-tooltip>
                    </el-collapse-item>
                    <el-collapse-item>
                        <template #title>
                            <el-tooltip class="box-item" effect="dark" content="评估分析"
                                placement="right">
                                <div class="评估分析">
                                    <img src="/public/menuicon/99.png" alt="Custom Icon" class="custom-icon">
                                </div>
                            </el-tooltip>
                        </template>
                        <el-tooltip class="box-item" effect="dark" content="方案管理" placement="right">
                            <div class="imageBox1" @click="goToPage('fanganguanli')"><img
                                    src="/public/menuicon/shishibaojing.png" alt="">
                            </div>
                        </el-tooltip>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
    </div>
    <!-- </div> -->
</template>

<script setup>
import { ref } from "vue";
import bus from '../tools/eventBus'
import { useRouter } from 'vue-router'
import WebSocket from '../components/WebSocket.vue'
import { useSidebarStore } from '@/stores/sidebar.js'
const sidebar = useSidebarStore()
const router = useRouter()
const isTrue = ref(true)
bus.on('unfoldable', (is) => {
    isTrue.value = is
})

function goToPage(page) {
    switch (page) {
        case 'yuanchengjiance':
            router.push({ path: '/theme/colors' })
            break
        case 'diaoduzonglan':
            router.push({ path: '/dashboard' })
            break
        case 'shishibaojing':
            router.push({ path: '/theme/typography' })
            break
        case 'lishibaojing':
            router.push({ path: '/theme/AlarmIedger' })
            break
        case 'baojinghjilu':
            router.push({ path: '/theme/AlarmRecord' })
            break
        case 'fanganguanli':
            router.push({ path: '/theme/ProgramManage' })
        break
        case 'changzhangongyi':
            router.push({ path: '/theme/workManship' })
        break
    }
}
</script>
<style scoped>
.image-grid{
    width: 60px;
    height: 100vh;
    position: relative;
    left: 30px;
    top: 32px;
    opacity: 0.9;
    background: #FFFFFF;
    box-shadow: 0px 2px 6px 0px rgba(31,35,41,0.06);
}
.cil-menu{
    margin-top: 18px;
}
.image-grid img {
    width: 25px;
    height: auto;
}

.imageBox {
    margin-top: 20px;
}

.imageBox1 {
    margin-top: 20px;
}

::v-deep .el-collapse-item__wrap {
    /* background-color: #f3f4f7; */
    width: 25px;
}

::v-deep .el-collapse-item__header {
    /* background-color: #f3f4f7; */
    width: 25px;
}
</style>
